<template>
  <div class="search">
    <header>
      <i class="iconfont icon-iconfontseacher"></i>
      <input
        type="text"
        class="searchBar"
        placeholder="search"
        @keyup.enter="search"
        v-model="phone"
      >
      <i
        class="iconfont icon-nav"
        @click="sheetVisible=!sheetVisible"
      ></i>
      <mt-actionsheet
        :actions="actions"
        v-model="sheetVisible"
      >
      </mt-actionsheet>
    </header>
    <div
      class="result"
      v-if="user.objectId"
    >
      <list-item
        :item="user"
        @click.native="click_user(user)"
      ></list-item>
    </div>
    <div
      class="result_NULL"
      v-if="!user.objectId"
    >
      无
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import ListItem from "../home/listItem/index";
import { findUser } from "./service";
import myalert from "../../utils/alert";
import { post_push_user } from "../home/listItem/service";
export default {
  name: "search",
  components: { ListItem },
  methods: {
    click_user(user) {
      post_push_user(user.objectId).then(res => {
        myalert.success("添加朋友成功");
      });
    },
    async search(e) {
      var self = this;
      var value = e.target.value;
      findUser(this.phone).then(user => {
        if (user) self.user = user.toJSON();
      });
    }
  },
  data() {
    return {
      phone: "",
      user: {},
      actions: [
        {
          name: "个人设置",
          method() {
            self.$router.push("/self");
          }
        }
      ],
      sheetVisible: false
    };
  }
};
</script>
<style lang="less" scoped>
header {
  padding-left: 15px;
  padding-right: 15px;
  height: 60px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #eee;
  box-shadow: 1px 1px 1px #eee;
  .searchBar {
    border: none;
    background: #eee;
    border-radius: 50px;
    flex: 1;
    padding-left: 20px;
    margin-left: 15px;
    margin-right: 15px;
  }
}
</style>

